<script setup lang="ts">
import { ElTable, ElTableColumn, ElTooltip } from 'element-plus-cisdi';
import { computed } from 'vue';
import empty from '@/components/empty/index.vue';
import { UserOrgIsExtend, UserOrgStatus, UserTableColProp } from '@/constants/UserManage';
import { t } from '@/locales';
import { formatTimestampToLocalDateString } from '@/utils/TimeFormatUtil';

// 接收props
const props = defineProps({
  orgList: {
    type: Array,
    default: () => [],
  },
});

const orgList = computed(() => props.orgList);
function formatDateTime(_: any, __: any, cellValue: any) {
  return cellValue === null ? '-' : formatTimestampToLocalDateString(cellValue);
}
</script>

<template>
  <div class="user-org-info-table">
    <ElTable :data="orgList" height="500" header-cell-class-name="table-header" :resizable="true" :border="true">
      <template #empty>
        <empty />
      </template>
      <ElTableColumn :prop="UserTableColProp.INDEX" :label=" t('common.serialNumber') " width="60" />
      <ElTableColumn :prop="UserTableColProp.ORG_CODE" :label=" t('user.orgCode') " min-width="120" />
      <ElTableColumn :prop="UserTableColProp.ORG_FULL_NAME" :label="t('user.orgName')" min-width="200">
        <template #default="scope">
          <ElTooltip
            :content="scope.row.orgFullName"
            placement="top"
            effect="light"
          >
            <div class="ellipsis-text">
              {{ scope.row.label }}
            </div>
          </ElTooltip>
        </template>
      </ElTableColumn>
      <ElTableColumn :prop="UserTableColProp.IS_EXTEND" :label=" t('user.isExpisandedOrg') " width="120">
        <template #default="{ row }">
          <span>{{ row.isExtend === UserOrgIsExtend.EXTEND_NO ? t('user.no') : t('user.yes') }}</span>
        </template>
      </ElTableColumn>
      <ElTableColumn :prop="UserTableColProp.STATUS" :label=" t('user.status') " width="120">
        <template #default="{ row }">
          <div class="status-dot" :class="row.status === UserOrgStatus.USER_ORG_SUCCESS ? 'success' : 'danger'" />
          <span>{{ row.status === UserOrgStatus.USER_ORG_SUCCESS ? t('user.enabled') : t('user.disabled') }}</span>
        </template>
      </ElTableColumn>
      <ElTableColumn :prop="UserTableColProp.CREATE_NAME" :label=" t('common.createBy') " column-key="createName" min-width="120" />
      <ElTableColumn :prop="UserTableColProp.CREATE_TIME" :label=" t('common.createTime') " column-key="createTime" min-width="180" :formatter="formatDateTime" />
      <ElTableColumn :prop="UserTableColProp.UPDATE_NAME" :label=" t('common.updateBy') " column-key="updateName" min-width="120" />
      <ElTableColumn :prop="UserTableColProp.UPDATE_TIME" :label=" t('common.updateTime') " column-key="updateTime" min-width="180" :formatter="formatDateTime" />
    </ElTable>
  </div>
</template>

<style scoped lang="scss">
@use '@lingshu/theme-lib/scss/util.scss' as *;

.user-org-info-table {
  :deep(.el-table__border-left-patch) {
    width: 0px;
  }
}
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 4px;
}

.success {
  background-color: useThemeVar('success');
}

.danger {
  background-color: useThemeVar('error');
}
.ellipsis-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

:global(.table-header .cell) {
  font-weight: $font-weight-base;
  color: useThemeVar('module_-bg10');
  font-size: $font-size-middle;
}

:global(.el-table .cell) {
  padding: 0 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
